<template>
  <div class="unit-container">
    <!-- 显示 -->
    <el-card shadow="always">
      <!-- 第一行，按钮（添加单位）和搜索框 -->
      <el-row :gutter="24">
        <!-- 按钮，添加单位 -->
        <el-col :span="18">
          <el-button
            type="primary"
            size="small"
            @click="showDialogForm"
          >添加单位</el-button>
        </el-col>
        <!-- 输入框，搜索表格内容 -->
        <el-col :span="6">
          <el-input
            v-model="input"
            placeholder="请输入内容"
            prefix-icon="el-icon-search"
            size="small"
            @keyup.enter.native="getUnitList()"
          />
        </el-col>
      </el-row>

      <!-- 第二行，表格显示单位信息 -->
      <el-table
        size="small"
        :data="unitList"
        style="width: 100%; margin: 15px 0px"
      >
        <el-table-column prop="id" label="单位ID" align="center" />
        <el-table-column prop="name" label="单位名称" align="center" />
        <el-table-column label="单位状态" align="center">
          <template slot-scope="{ row }">
            <el-tag :type="tagType(row)">{{
              row.flag ? "启用" : "禁用"
            }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="{ row }">
            <el-tooltip
              class="item"
              effect="dark"
              content="修改单位信息"
              placement="bottom"
            >
              <el-button
                type="primary"
                icon="el-icon-edit"
                circle
                @click="modify(row)"
              />
            </el-tooltip>
            <!-- <el-tooltip
              class="item"
              effect="dark"
              content="删除单位信息"
              placement="bottom"
            >
              <el-button
                type="danger"
                icon="el-icon-delete"
                circle
                @click="deleteUnit(row)"
              />
            </el-tooltip> -->
          </template>
        </el-table-column>
      </el-table>

      <!-- 对话框，添加|修改品牌信息 -->
      <DialogForm ref="dialogForm" @getUnitList="getUnitList()" />
    </el-card>
  </div>
</template>

<script>

// 引入组件
import DialogForm from '@/views/information/unit/components/DialogForm.vue'

export default {
  name: 'Unit',
  components: {
    DialogForm
  },
  data() {
    return {
      // 用来筛选单位信息的关键字
      input: '',
      // 单位信息列表
      unitList: []
    }
  },
  mounted: function() {
    // 加载完成，查询单位信息
    this.getUnitList()
  },
  methods: {
    // 添加单位
    showDialogForm() {
      // 调用子组件添加单位方法，显示弹窗
      this.$refs.dialogForm.dialogFormOn()
    },
    // 获取（筛选）单位信息，
    async getUnitList() {
      // 调用接口，获取单位信息
      const response = await this.$API.unit.get(this.input)
      if (response.code === 200) {
        // 保存单位信息列表
        this.unitList = response.data
      } else {
        // 弹窗提醒
        this.$message.error(response.msg)
      }
    },
    // 返回tag的type（单位状态）
    tagType(row) {
      return row.flag ? 'success' : 'danger'
    },
    // 修改单位信息
    modify(row) {
      // 调用子组件添加单位方法，显示弹窗
      this.$refs.dialogForm.dialogFormOn()
      // 修改子组件dialogForm内容
      this.$nextTick(() => {
        this.$refs.dialogForm.dialogForm = { ...row }
      })
    },
    // 删除单位信息
    deleteUnit(row) {
      this.$confirm('此操作将永久删除该单位信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        const response = await this.$API.unit.deleteUnit(row.id)
        if (response.code === 200) {
          // 删除成功
          this.$message.success(response.msg)
          // 重新拉取单位数据
          this.getUnitList()
        } else {
          // 删除失败
          this.$message.error(response.msg)
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  }
}
</script>

<style lang='scss' scoped>
.unit {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
